﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ComboBox 联动下拉选择</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <h1>ComboBox 联动下拉选择 </h1>
    
    <span>部门</span><br />
    <input id="countryCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" 
        onvaluechanged="onCountryChanged" />         
    <br /><br />

    <span>职位</span><br />
    <input id="cityCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" />         

    
    <script type="text/javascript">
        mini.parse();

        var countryCombo = mini.get("countryCombo");
        var cityCombo = mini.get("cityCombo");

        function onCountryChanged(e) {

            var id = countryCombo.getValue();

            //这里延迟填充数据，模拟ajax异步特性
            setTimeout(function () {
                var cs = getCitys(id);
                cityCombo.load(cs);
            }, 100);

        }

        var countrys = [
            { id: "", name: "" },
            { id: "usa", name: "美国" },
            { id: "cn", name: "中国" },
            { id: "jp", name: "日本" }
        ];
        var citys = [
            { id: 1, name: '北京', cid: "cn" },
            { id: 2, name: '上海', cid: "cn" },
            { id: 3, name: '苏州', cid: "cn" },
            { id: 4, name: '成都', cid: "cn" },
            { id: 4, name: '芝加哥', cid: "usa" },
            { id: 5, name: '纽约', cid: "usa" },
            { id: 6, name: '洛杉矶', cid: "usa" },
            { id: 7, name: '东京', cid: "jp" },
            { id: 8, name: '大阪', cid: "jp" }
        ];
        function getCitys(cid) {
            var cs = [];
            for (var i = 0, l = citys.length; i < l; i++) {
                var city = citys[i];
                if (city.cid == cid) {
                    cs.push(city);
                }
            }
            return cs;
        }

        countryCombo.load(countrys);
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>选择"国家"ComboBox后，将动态调整"城市"ComboBox可选择的下拉框列表数据。     
        </p>
    </div>
</body>
</html>